<template>
  <view class="makeAnA" :style="{ 'padding-bottom': $getBottomHight() + 20 + 'rpx' }">
    <view class="title flex-c">选择服务者上门时段</view>

    <view class="middle flex">
      <scroll-view scroll-y class="date_mid">
        <view class="scr_time flexD-c">
          <view class="time_item" @click="scrTime(item.id, item.isMake)" :class="item.id === timeId ? 'selected' : ''"
            v-for="item in timeList" :key="item.id">{{ item.time }} {{ item.day }}</view>
        </view>
      </scroll-view>
      <scroll-view scroll-y class="time_scroll">
        <view class="time_mid">
          <view v-for="item in timePeriodList" :key="item" class="paragraph_item" :class="{
            selected: enough === 1 && item === timePeriod,
            disabled: enough === 0
          }" @click="handleTimeClick(item)">
            {{ item }}
            <template v-if="enough === 0">
              <text class="full-text">（已约满）</text>
            </template>
          </view>
        </view>
      </scroll-view>

    </view>

    <view class="pop_bottom flex-c">
      <view @click="confirmation" class="mainBtn confirms">确认</view>
    </view>
  </view>
</template>

<script>
import { showToast, getTimeThirty, timeFormat, generateTimeArray } from '@/utils/tools.js'

import { selectTime,testShowTime } from "@/api/home.js"
export default {
  props: {
    // 接收 createTime 参数
    createTime: {
      type: String,
      required: false, // 可选
      default: null,
    },
  },
  data () {
    return {
      timeList: [],
      timePeriodList: [],
      timeArr: [],
      timeId: 0,
      timePeriod: "08:00",
      days: null,
      timesa: null,
      plus: null,
      enough: null
    }
  },
  mounted () {
    this.getTime()
    this.getShowTime()
  },
  methods: {
    getTime () {
      selectTime().then(res => {
        if (res.code === 1)
        {
          this.days = res.data.days
          this.timesa = res.data.selecttime
          this.plus = res.data.plus
          this.timeArr = res.data.timeList
          this.timePeriodList = res.data.timeList
          this.timeList = getTimeThirty(this.days, this.timesa, this.plus, this.createTime)
          this.scrTime(0, this.timeList[0].isMake)
        }
      })
    },
    getShowTime(){
      testShowTime({
        orderTime:this.createTime,
        timeNow:"2024-12-01 16:57:38"
      }).then(res=>{
      })
    },
    handleTimeClick (item) {
      // 如果时间段已满（enough === 0），阻止点击事件
      if (this.enough === 0) return;
      // 设置选中的时间段
      this.timePeriod = item;
    },
    // 点击日期获取时间
    scrTime (id, isMake) {

      if (id === 0)
      {
        this.timePeriodList = this.timeArr
      }
      else
      {
        this.timePeriodList = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']
      }
      if (isMake === 1)
      {
        this.timePeriod = this.timePeriodList[0]
      } else
      {
        this.timePeriod = null
      }
      this.enough = isMake
      this.timeId = id
    },

    confirmation () {
      if (!this.timePeriod)
      {
        this.$showToast("请选择时间段");
        return;
      }
      const time = this.timeList.find(item => item.id === this.timeId).time
      this.$emit('timeConfirm', time + ' ' + this.timePeriod)
    }
  }
}
</script>

<style scoped lang="scss">
@import url('@/static/css/base.scss');

.makeAnA {
  position: relative;

  .title {
    height: 100rpx;
    font-size: 32rpx;
    color: #1C2023;
    border-bottom: 2rpx solid #E4E4E4;
  }

  .middle {
    width: 100%;
    font-size: 30rpx;
    height: 52vh;

    .selected {
      color: #FF8104 !important;
      font-weight: bold;
    }

    .time_mid {
      width: 100%;
      height: 100%;

      .paragraph_item {
        padding: 30rpx;
        border-bottom: 2rpx solid #E4E4E4;
      }

      .selected {
        color: #ff8104;
        font-weight: bold;
      }

      .disabled {
        color: #888888;
        background: #f4f4f4;
        cursor: not-allowed; // 鼠标提示不可点击

        .full-text {
          color: #ff8104;
        }
      }
    }

    .time-no {
      width: 100%;
      height: 100%;
      text-align: center;
      color: #FF8103;
      margin-top: 340rpx;
    }

    .time_scroll {
      height: 100%;
      flex: 1;
    }

    .date_mid {
      height: 100%;
      width: 42%;
      border-right: 2rpx solid #E4E4E4;

      .scr_time {
        padding: 30rpx;
        row-gap: 20rpx;

        .time_item {
          color: #707070;
          padding: 20rpx 0;
        }
      }
    }
  }

  .pop_bottom {
    padding: 0 50rpx;
    width: calc(100% - 100rpx);
    height: 100rpx;

    .confirms {
      padding-top: 0;
      padding-bottom: 0;
      height: 80rpx;
      width: 100%;
    }
  }
}
</style>
